<template>
  <el-container class="layout" style="border: 1px solid #eee">
    <!-- 头部 -->
    <el-header class="flex jc-sb f18">
      <span>饿了么demos</span>
    </el-header>

    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px" class="bg-fff">
        <el-menu :default-openeds="[index]">
          <template v-for="(item,index) in routes">
            <el-submenu
              index="-1"
              :key="index"
            >
              <template slot="title">
                <router-link style="padding-left:20px;box-sizing:border-box;" active-class="active" exact :to="item.path"> <i class="el-icon-view"></i>{{item.name}}</router-link>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
          <el-card>
            <div slot="header">
              {{$route.name}}
            </div>
             <nuxt/>
          </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>
<style>
@import './common.css';
.line {
  margin-top:10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: block;
}
* {
  margin: 0;
  padding: 0;
}
.layout {
  background: #ebebeb;
}
.el-menu-item.is-active {
  background: #b3c0d1;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  background: #fff;
}
</style>

<script>
import {routerOptions} from "../.nuxt/router";
import { debuglog } from "util";
export default {
  data() {
    return {
      index: "0",
      routes: []
    };
  },
  created() {
    this.routes = routerOptions.routes;
  },
  methods: {
    onChange(index) {
      this.index = index + "";
    }
  }
};
</script>

<style>
  .layout .el-submenu__icon-arrow{
      display: none!important;
  }
  .layout .el-submenu__title {
    padding-left: 0!important;
    padding-right: 0;
  }
  .layout .el-aside>.el-menu {
    min-height: 100vh;
  }
</style>

<style scoped>
.active {
  background: #e6e6e6;
  color: #409eff;
}
.active .el-icon-view {
  color: #409eff;
}
a {
  display: block;
  width: 100%;
  text-decoration: none;
}
.el-aside {
  height: 100%;
}
</style>